<template>
  <div class="home">
    <div class="bg-text">我与我周旋久，宁做我</div>
    <div class="home-main">
      <div class="article-list">
        <Article v-for="todo in articleList" :key="todo.id" :todo="todo"/>
        <el-pagination layout="prev, pager, next" :total="currentCategory===-1?articleTotal:articleList.length" :page-size="8" v-model:current-page="currentPage"> </el-pagination>
      </div>
      <div class="category-list">
        <div class="category-list-title">
          <img src="../assets/category.svg" style="vertical-align: bottom;width: 19px;height: 19px;margin-right: 5px;"/>
          <span style="vertical-align: bottom;display: inline-block">目录</span>
          <span style="font-size: 12px;color: #999aaa;margin-left: auto">共计{{ articleTotal }}篇</span>
        </div>
        <Category
          v-for="todo in categoryList"
          :key="todo.id"
          :todo="todo"
          @click="selectCategory(todo.id)"
        />
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script lang="ts">
import Footer from "../components/Footer.vue"
import Category from '../components/Category.vue'
import { ICategory } from '@/interface/category'
import Article from "@/components/Article.vue";
import { IArticle} from "@/interface/article";
import { defineComponent, computed, onMounted, reactive, watch, toRefs, ref} from 'vue'
import {getAllCategory} from "@/api/category";
import {getAllArticle} from "@/api/article";

export default defineComponent({
  name: 'Home',
  components: {
    Footer,
    Category,
    Article
  },
  setup() {
    const state = reactive<{categoryList: ICategory[], articleList: IArticle[]}>({
      categoryList:[],
      articleList:[]
    })
    const currentPage = ref(0)
    const currentCategory = ref(-1)
    const articleTotal = computed({
      get() {
        let total = 0
        state.categoryList.forEach((item) => {
          total += item.total
        })
        return total
      },
      set(val) {
        console.log(val)
      }
    })
    const selectCategory = (id) => {
      // console.log('select')
      currentCategory.value = id
      if(currentPage.value === 1){
        getAllArticle(8,0, id).then(res => {
          state.articleList = res.data.data
        })
      }else currentPage.value = 1
    }
    onMounted(() => {
      getAllCategory().then(res => {
        state.categoryList = res.data.data
      })
      currentCategory.value = -1
      currentPage.value = 1
    })
    watch(currentPage, (current: number) => {
      getAllArticle(8,(current-1)*8, currentCategory.value===-1?null:currentCategory.value).then(res => {
        state.articleList = res.data.data
      })
    })
    return {
      ...toRefs(state),
      articleTotal,
      currentPage,
      selectCategory,
      currentCategory
    }
  }
})
</script>

<style scoped>
@media screen and (min-width: 751px){
  .bg-text {
    background-color: black;
    height: 200px;
    color: white;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 5px;
  }
  .home-main {
    display: flex;
    align-items: flex-start;
    margin: 20px auto 0;
    padding: 0 20px;
    max-width: 1126px;
  }
  .article-list {
    flex: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .category-list {
    flex: 0 0 300px;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 0 15px;
    margin-left: 15px;
    border-radius: .25rem;
  }
}
@media screen and (max-width: 750px){
  .bg-text {
    background-color: black;
    height: 100px;
    color: white;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 5px;
  }
  .home-main {
    margin: 20px auto 0;
    padding: 0 20px;
    max-width: 1126px;
  }
  .article-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .category-list {
    width: 100%;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 1px 15px 0 15px;
    margin-top: 50px;
    border-radius: .25rem;
  }
}
.bg-text:hover {
  text-shadow: 0 0 10px #0ebeff, 0 0 20px #0ebeff, 0 0 50px #0ebeff, 0 0 100px #0ebeff, 0 0 200px #0ebeff;
}
.category-list-title {
  margin: 1rem 0;
  display: flex;
  align-items: flex-end;
}
</style>
